<template>
  <div class="nav">
    <van-tabs v-model="active" line-height='0.05rem' line-width='1rem' title-active-color='red'>
      <van-tab :title="item" v-for="(item,index) in listNav" :key="index" />
    </van-tabs>
    <div class="pull-down-menu">
      <van-icon :name="!show? 'arrow-down' : 'arrow-up'" size=".3rem"/>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Tab, Tabs, Popup } from 'vant'

Vue.use(Tab)
Vue.use(Tabs)
Vue.use(Popup)
export default {
  data () {
    return {
      listNav: ['推荐', '居家生活', '服饰鞋包', '美食酒水', '个护清洁', '母婴亲子', '运动旅行', '数码家电', '严选全球'],
      active: 0,
      show: false,
      toggleRotate: false
    }
  },
  methods: {
    showPopup () {
      this.show = true
    }
  }
}
</script>

<style lang='less' scoped>
.nav{
  height: .6rem;
  overflow: hidden;
  font-size: .28rem;
  font-weight: 400;
  position: relative;
  padding-right: 1.3rem;
  /deep/.van-tabs__nav--line{
    height: .6rem;
    padding-bottom: 0;
  }
  /deep/.van-tabs__line{
    bottom: 0;
  }
  .pull-down-menu{
    width: 1rem;
    height: .6rem;
    text-align: center;
    line-height: .6rem;
    position: absolute;
    right: 0;
    top: 0;
  }
}
</style>
